<template>
	<view>
		<!-- 头部信息 -->
		<view class="header">
			<image src="../../../static/img/center/avatar.png" mode=""></image>
			<view class="header-info">
				<view class="header-name">{{userData.nickname}}</view>
				<view class="header-bottom">
					<view class="collection">
						<view class="collection-num">{{userData.collectCount}}</view>
						<navigator url="/pages/user/collection/collection">
							<view>我的收藏</view>
						</navigator>
					</view>
					<view class="brand">
						<view class="brand-num">{{userData.now_money}}</view>
						<view>余额</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 我的订单 -->
			<view class="order">
				<u-cell title="我的订单" :border="false" isLink value="全部订单" arrow-direction="right"
					@click="handAllOrder"></u-cell>
				<view class="order-info">
					<view class="order-detail" @click="handlePayments(0)">
						<u-badge type="error" max="99" :value="orderStatusNum.unpaid_count" shape="circle" absolute
							:offset="offset" style="z-index: 100;">
						</u-badge>
						<image src="../../../static/img/center/icon-1.jpg" mode=""></image>
						<view class="order-title">待付款</view>
					</view>
					<view class="order-detail" @click="handlePayments(1)">
						<u-badge type="error" max="99" :value="orderStatusNum.unshipped_count" shape="circle" absolute
							:offset="offset" style="z-index: 100;">
						</u-badge>
						<image src="../../../static/img/center/icon-2.jpg" mode=""></image>
						<view class="order-title">待发货</view>
					</view>
					<view class="order-detail" @click="handlePayments(2)">
						<image src="../../../static/img/center/icon-3.jpg" mode=""></image>
						<view class="order-title">待收货</view>
					</view>
					<view class="order-detail" @click="handlePayments(3)">
						<image src="../../../static/img/center/icon-4.jpg" mode=""></image>
						<view class="order-title">待评价</view>
					</view>
					<view class="order-detail">
						<image src="../../../static/img/center/icon-5.jpg" mode=""></image>
						<view class="order-title">售后</view>
					</view>
				</view>
			</view>
			<!-- 我的资产 -->
			<view class="asset">
				<view class="my-asset">我的资产</view>
				<view class="asset-info">
					<view class="asset-detail" v-for="item in asset">
						<image :src="item.src" mode=""></image>
						<view class="asset-title">{{item.title}}</view>
					</view>
				</view>
			</view>
			<!-- 工具 -->
			<view class="tool">
				<view class="tool-title">我的资产</view>
				<view class="tool-info">
					<view class="tool-detail" v-for="item in tools">
						<navigator url="/pages/user/address/list/list" hover-class="none">
							<image :src="item.src" mode=""></image>
							<view class="tool-name">{{item.title}}</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { user } from '../../../api'
	export default {
		onLoad() {
			this.getUserInfo();
		},
		data() {
			return {
				asset: [{
						id: 1,
						src: '../../../static/img/center/icon-6.jpg',
						title: '优惠券'
					},
					{
						id: 2,
						src: '../../../static/img/center/icon-7.jpg',
						title: '钱包'
					},
					{
						id: 3,
						src: '../../../static/img/center/icon-8.jpg',
						title: 'D币'
					},
					{
						id: 4,
						src: '../../../static/img/center/icon-9.jpg',
						title: '红包'
					},
				],
				tools: [{
						id: 1,
						src: '../../../static/img/center/icon-10.jpg',
						title: '会员中心'
					},
					{
						id: 2,
						src: '../../../static/img/center/icon-11.jpg',
						title: '收货地址'
					},
					{
						id: 3,
						src: '../../../static/img/center/icon-12.jpg',
						title: '售后&客服'
					},
					{
						id: 4,
						src: '../../../static/img/center/icon-13.jpg',
						title: '设置'
					},
					{
						id: 5,
						src: '../../../static/img/center/icon-14.jpg',
						title: '入驻合作'
					},
					{
						id: 6,
						src: '../../../static/img/center/icon-15.jpg',
						title: '反馈&投诉'
					},
					{
						id: 7,
						src: '../../../static/img/center/icon-16.jpg',
						title: '商品报告'
					},
					{
						id: 8,
						src: '../../../static/img/center/icon-17.jpg',
						title: '关于我们'
					},
				],
				userData: {},
				orderStatusNum: {},
				offset: [-5, -5],
			}
		},
		methods: {
			// 全部订单
			handAllOrder() {
				uni.navigateTo({
					url: '/pages/order/orderDetail?type=9',
				})
			},
			// 个人中心
			async getUserInfo() {
				let { status, msg, data } = await user.user_center();
				if (status === 200) {
					this.userData = data;
					this.orderStatusNum = data.orderStatusNum;
				}
			},
			// 待付款
			handlePayments(type) {
				uni.navigateTo({
					url: `/pages/order/orderDetail?type=${type}`,
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		width: 750rpx;
		height: 373rpx;
		background-image: url('../../../static/img/center/bg.jpg');
		background-size: cover;
		position: relative;

		image {
			width: 128rpx;
			height: 128rpx;
			margin: 90rpx 311rpx 154rpx 311rpx;
			z-index: 10;
		}

		.header-info {
			width: 690rpx;
			height: 242rpx;
			background-color: #ffffff;
			box-shadow: 10px 5px 5px #eee;
			position: absolute;
			left: 30rpx;
			bottom: -44rpx;

			.header-name {
				font-size: 34rpx;
				color: #333333;
				text-align: center;
				margin-top: 68rpx;
			}
		}

		.header-bottom {
			display: flex;

			.collection {
				font-size: 28rpx;
				text-align: center;
				margin-left: 115rpx;
				margin-top: 36rpx;

				.collection-num {
					margin-bottom: 10rpx;
				}
			}

			.brand {
				text-align: center;
				font-size: 28rpx;
				margin-left: 234rpx;
				margin-top: 36rpx;

				.brand-num {
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.order {
		width: 750rpx;
		margin-top: 69rpx;
		border-bottom: 1rpx solid #eee;

		.order-info {
			display: flex;
			justify-content: space-around;
			margin-top: 43rpx;

			.order-detail {
				text-align: center;
				position: relative;

				image {
					width: 50rpx;
					height: 45rpx;
				}

				.order-title {
					width: 73rpx;
					height: 25rpx;
					font-size: 24rpx;
					color: #555555;
					margin-bottom: 52rpx;
				}
			}
		}
	}

	.asset {
		width: 750rpx;
		margin-top: 67rpx;
		border-bottom: 1rpx solid #eee;

		.my-asset {
			font-size: 32rpx;
			margin-left: 32rpx;
		}

		.asset-info {
			display: flex;
			justify-content: space-around;
			margin-top: 43rpx;

			.asset-detail {
				text-align: center;

				image {
					width: 55rpx;
					height: 45rpx;
				}

				.asset-title {
					width: 73rpx;
					height: 25rpx;
					font-size: 24rpx;
					color: #555555;
					margin-bottom: 51rpx;
				}
			}
		}
	}

	.tool {
		width: 750rpx;
		margin-top: 67rpx;

		.tool-title {
			font-size: 32rpx;
			margin-left: 32rpx;
		}

		.tool-info {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 43rpx;

			.tool-detail {
				width: 170rpx;
				text-align: center;

				image {
					width: 50rpx;
					height: 45rpx;
					margin-bottom: 24rpx;
				}

				.tool-name {
					font-size: 24rpx;
					color: #555555;
					margin-bottom: 50rpx;
				}
			}
		}
	}
</style>